<script setup>
import { getHotGoodsAPI } from '@/apis/detail.js';
import { useRoute } from 'vue-router';
import { computed, ref, onMounted } from 'vue';
const TITLEMAP = {
	1: '24小时热榜',
	2: '周热榜',
}

const props = defineProps({
	type: {
		type: Number, // 1代表24小时热销榜 2代表周热销榜 3代表总热销榜 可以使用type去适配title和数据列表
		default: 1
	}
});

const title = computed(() => TITLEMAP[props.type])

const route = useRoute();
const hotList = ref([]);

const getHotGoods = async (params) => {
	const res = await getHotGoodsAPI(params).then(res => res.data);
	hotList.value = res.result;
}
onMounted(() => {
	getHotGoods({ id: route.params.id, type: props.type })
});
</script>

<template>
	<div class="hot-panel">
		<h4 class="title">{{ title }}</h4>
		<ul class="content">
			<li v-for="item in hotList" :key="item.id">
				<router-link to="/" class="goods-item">
					<img v-img-lazy="item.picture" alt="">
					<p class="name"> {{ item.name }}</p>
					<p class="desc"> {{ item.desc }}</p>
					<p class="price"> ￥{{ item.price }}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<style scoped lang="scss">
.hot-panel {
	width: 220px;
	margin-bottom: 10px;
	.title {
		padding: 20px;
		color: #fff;
		font-size: 18px;
		font-weight: normal;
		background-color: #ff3d01;
	}

	.content {
		margin-top: 10px;
		background-color: #fff;
		padding: 10px 0;

		.goods-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10px;
			margin: 10px;
			&:hover {
				background-color: #f5f5f5;
			}
			img {
				width: 120px;
			}

			p {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;
				margin-top:	10px;
			}

			.desc {
				color: #999;
				font-size: 10px;
			}

			.price {
				font-size: 16px;
				color: $priceColor;
			}
		}
	}
}
</style>